<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡-转换-缩放-斜切-旋转-改变元素变换的中心点</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position:absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 100px;
				height: 100px;
				background-color:lightskyblue;
			/* 	transform: translate(100px,200px) */
				/* 过渡transition :过渡的属性，过渡的时间
				时间：
				ease :默认值，慢-快-慢
				linear:匀速
				ease-in:低速开始
				ease-out:低速结束
				ease-in-out:低速结束和开始
				*/
				/* transition: width 3s linear 1s /* 延迟 */; */
				/* transition: height 3s linear; */
				/* all:所有的 */
				transition:all 3s linear;
				
			}
			/* 鼠标悬停 */
			.box:hover {
				/* width: 800px;
				height: 500px; */
				background-color: aqua;
				/* transform转换:
				1.位移translate(x轴方向,y轴方向); 
				位移的值可以百分比，对应自身宽高的百分比。
				 transform: translate(100px,200px);
				            translatex();x轴方向
							translatey();y轴方向
				2.缩放scale():倍数
				*/
				/* transform: translatey(-100px); */
				/* transform:scale(-2); */
	             /* transform:skewY(45deg); */
				  /* transform:rotatey(-90deg); */
				/* 斜切:skew:
				skewX(45deg)x轴倾斜45度
				skewY(45deg)y轴倾斜45度
				skew(-45deg)x轴倾斜45度
				skew(45deg)y轴倾斜45度 */
				
				/* 旋转rotate():
				rotate(90deg)顺时针方向旋转
				rotate(-90deg)逆时针方向旋转
				rotateX(90deg)沿着x轴方向旋转
				rotateY(90deg)沿着y轴方向旋转 */
				/* 复合写法:transform:translatey(-100px) scale(2) rotatey(45deg); */
				transform:translatey(-100px) scale(2) rotatey(45deg);
				transform-origin:50% 50% ;
				/* transform-origin:x-axis y-axis ; 
				x-axis：left center right length %
				y-axis：top center bottom length %
				x-officeset:定义变形中心距离盒子模型的左偏移量
				y-officeset：定义变形中心距离盒子模型的顶的偏移量
				z-officeset：定义变形中心距离用户的左偏移量
				left；center right
				*/
			}
		</style>
	</head>
	<body>
	
		<div class="box">
			<!-- <div class="er"></div> -->
		</div>
		
	</body>
</html>
